*{
  padding: 0px;
  margin: 0px;
}
li{
  list-style: none;
}
img{
  border: 0px;
}
/*最外层div*/
.example-frame{
  position: relative;margin: 0px auto;
  overflow: hidden;
}

/*被拖拖动的框*/
.draggie{
  width: 67%;
  height: 42%;
  background:url('../images/shuye.png')no-repeat 0px 0px;background-size: 100% 100%;
  border-radius: 5px;position: absolute;z-index: 10;bottom:0px;top: 1008px;
}
/*被拖拖动框的父级*/
#container{
  position: absolute;left: 0px;top: 0px;
}
/*里面包含着分开的两块*/
.example-frame .two{
  position: absolute;z-index: 8;    
  left: 0px;
  top: 0px;overflow: hidden;
}
/*左边框*/
.right{
  position: absolute;z-index: 8;
  left: 0px;
  top: 0px;overflow: hidden;
}
/*右边块*/
.left{
  position: absolute;z-index: 8;
  top: 0px ;
  right: 0px;overflow: hidden;
}
/* 开启您的健康之旅*/
.start{
  width: inherit;height: inherit;
  background: url('../images/H5-2.jpg')no-repeat 0px 0px;z-index: 7;
  background-size: 100% 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
/*选择你的承诺*/
.choose-box,.choose,.list-box,.list{
  width: inherit;height: inherit;position: absolute;left: 0px;top: 0px;background: url('../images/bg.png')no-repeat 0px 0px;background-size: 100% 100%;
  z-index: 6;
}
.choose{
  /*display: none;*/
  z-index: 7;
}

.choose-box .choose ul{
  margin: 0px auto;width: 70%;
}
.choose-box .choose ul li{
  text-align: center;height: 100px;z-index: 7;margin: -64px 0px;color: white;
}
 .li1{
background: url('../images/sleep.png')no-repeat 0px 0px;background-size: 100% 100%;height: 15%;line-height: 15%;
}
 .ali1{
background: url('../images/1.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .li2{
  background: url('../images/family.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .ali2{
  background: url('../images/2.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .li3{
  background: url('../images/eat.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .ali3{
  background: url('../images/3.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .li4{
  background: url('../images/sport.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .ali4{
  background: url('../images/4.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .li5{
  background: url('../images/water.png')no-repeat 0px 0px;background-size: 100% 100%;
}
 .ali5{
  background: url('../images/5.png')no-repeat 0px 0px;background-size: 100% 100%;
}
.list-box{
  z-index: 6;
}
/*睡觉*/
.sleep{
  background: url('../images/H5-5.1.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
/*陪家人在一起*/
.togther{
  background: url('../images/H5-5.2.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
/*按时吃饭*/
.eat{
  background: url('../images/H5-5.3.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
/*坚持锻炼*/
.exercise{
  background: url('../images/H5-5.4.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
/*喝水*/
.water{
  background: url('../images/H5-5.5.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
/*用户注册*/
.reg{
  background: url('../images/reg.png')no-repeat 0px 0px;background-size: 100% 100%;position: absolute;left: 0px ;top: 0px;z-index: 8;height: inherit;width: inherit;
}
#user{
  background: url('../images/user.png')no-repeat 0px 0px;background-size: 100% 100%;border: none;
  width: 100%;height: 80px;text-indent: 2em;font-size: 36px;margin-top: 92px;
  margin-bottom: 20px;color:white;
}
#pwd{
  background: url('../images/pwd.png')no-repeat 0px 0px;background-size: 100% 100%;border: none;
  width: 100%;height: 80px;text-indent: 2em;font-size: 44px;
}
.form{
  width:50%;margin:65%  auto 0px auto;
}
/*.s {
-webkit-animation: s 1.5s infinite;
}
@-webkit-keyframes s {
    0% {
        -webkit-transform: translateY(42px);
        opacity: 0
    }
    60% {
        -webkit-transform: translateY(12px);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px);
        opacity: 0
    }
}*/
.t,.d {
-webkit-animation: t 2s infinite;
}
@-webkit-keyframes t {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform:scale(1.2,1.2);
        -webkit-transform:scale(1.2,1.2);
        -o-transform:scale(1.2,1.2);
        opacity: 0.8
    }
    60% {
        -webkit-transform: translateY(3px);
        opacity: 1
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform:scale(1.2,1.2);
        -webkit-transform:scale(1.2,1.2);
        -o-transform:scale(1.2,1.2);
        opacity: 0.8
    }
}
@-webkit-keyframes d {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform:scale(1.2,1.2);
        -webkit-transform:scale(1.2,1.2);
        -o-transform:scale(1.2,1.2);
        opacity: 0.8
    }
    60% {
        -webkit-transform: translateY(3px);
        opacity: 1
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform:scale(1.2,1.2);
        -webkit-transform:scale(1.2,1.2);
        -o-transform:scale(1.2,1.2);
        opacity: 0.8
    }
}
.z{
-webkit-animation: z 10s infinite;
}
@-webkit-keyframes z {
    0% {
        -webkit-transform: translateY(1px);
        /*-webkit-transform: translateX(1px);*/
    }

    50% {
        -webkit-transform: translateY(100px);
        /*-webkit-transform: translateX(100px);*/
    }

    100% {
        -webkit-transform: translateY(1px);
        /*-webkit-transform: translateX(1px);*/
    }
.s1{
position: absolute;
width: 100%;
height: 169px;
bottom: 0;
left: 0;
text-align: center;
opacity: 1;
z-index: 200;
}
.h{
  -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@-webkit-keyframes mymove {
    0% {
        -webkit-transform: translateY(0px);
        /*opacity: 0*/
    }
    

    100% {
        -webkit-transform: translateY(-5000px);
        /*opacity: 0*/
    }
}